<!-- 分割线组件 -->
<template>
    <view class="footer flex flex-col  items-center fixed left-0 right-0 bottom-0 w-full bg-white z-10">
        <view class="flex justify-between w-94 ">
            <view class="flex justify-center items-start relative w-1/4 " v-for="(item, index) in menu" :key="index"
                @tap.stop="clickMenu(index, item)">
                <image :src="item?.icon" class="absolute top-3" mode="scaleToFill" v-if="selectIndex != index" />
                <text v-else class="flex justify-center items-center text w-full absolute top-5">{{ item?.name }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { userInfo, getTaBbar } from "@/api/interface/interface";
import { userStore } from '@/store/userStore';
import { footerStore } from '@/store/footerStore';


interface MenuData {
    name: string;
    icon: string;
    icon1: string;
    path: string;
}

const selectIndex = ref(0);
const menu = reactive<Partial<MenuData[]>>([]);


onLoad(async () => {
    const { current } = footerStore();
    selectIndex.value = current;
    const [tabBar, user] = await Promise.all([
        getTaBbar(),
        userInfo()
    ]);

    if (tabBar && tabBar.data) {
        menu.push(...tabBar.data);
    }

    if (user && user.data) {
        const { setUserInfo } = userStore();
        setUserInfo(user.data);
    }

});

const clickMenu = (index: number, item: MenuData) => {
    const { setCurrent } = footerStore();
    setCurrent(index);
    uni.navigateTo({
        url: item.path
    });
    return
}





</script>

<style scoped lang="scss">
.footer {
    height: 80px !important;

    image {
        height: 48px;
        width: 48px;
    }

    .text {
        height: 30px;
        opacity: 1;
        border-radius: 33.34px;
        background: linear-gradient(90deg, rgba(237, 121, 126, 1) 0%, rgba(230, 0, 18, 1) 100%);
        color: white;
        font-size: 18px;
        font-weight: 700;

    }
}
</style>